<script setup>
import "../assets/date"
import axios from "axios"
import { onMounted, ref } from "vue"
let tat = ref("")
onMounted(() => {
  axios.get("api/fenlei").then(res => {
    console.log(res)
    tat.value = res.data.data
  })
})
</script>

<template>
  <div class="box">
    <div class="title">
      校园易购
    </div>
    <ul class="nav">
        <li>打折</li>
        <li>宵夜</li>
        <li>零食</li>
        <li>水果</li>
    </ul>
    <div class="da">
      <div class="linqi">
        <img src="../assets/big.jpg" alt="">
        <div class="ac">
          <span>美式面包</span>
          <img src="../assets/big.jpg" alt="">
        </div>
        <div class="jiage">
          <span>￥36.00</span>
          <span>原价:￥9999999.00</span>
        </div>
      </div>
      <div class="linqi">
        <img src="../assets/big.jpg" alt="">
        <div class="ac">
          <span>美式面包</span>
          <img src="../assets/big.jpg" alt="">
        </div>
        <div class="jiage">
          <span>￥36.00</span>
          <span>原价:￥14.00</span>
        </div>
      </div>
      <div class="linqi">
        <img src="../assets/big.jpg" alt="">
        <div class="ac">
          <span>美式面包</span>
          <img src="../assets/big.jpg" alt="">
        </div>
        <div class="jiage">
          <span>￥36.00</span>
          <span>原价:￥14.00</span>
        </div>
      </div>
      <div class="linqi">
        <img src="../assets/big.jpg" alt="">
        <div class="ac">
          <span>美式面包</span>
          <img src="../assets/big.jpg" alt="">
        </div>
        <div class="jiage">
          <span>￥36.00</span>
          <span>原价:￥14.00</span>
        </div>
      </div>
    </div>
    <div class="yc">
      <span>首页</span>
      <span>购物车</span>
      <span>我的</span>
    </div>
 </div>
</template>
<style scoped>
.box {
    display: flex;
  flex-direction: column;
   gap: 20px;
  width: 375px;
  margin: 0 auto;
  border: 1px solid #ccc;
}
.title {
  height: 25px;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  line-height: 20px;
}
.nav{
    list-style: none;
    display: flex;
    justify-content: space-around;
    padding-right: 35px;
}
.linqi img {
  width: 170px;
  height: 200px;
}

.da {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  width: calc(50%-5px);
  background-color: #eeeded;
}

.linqi {
  width: 45%;
  display: flex;
  flex-direction: column;
}

.ac img {
  width: 30px;
  height: 30px;
  border-radius: 999px;
}

.ac {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.jiage span:nth-of-type(1) {
  color: red;
  font-size: 18px;
}

.jiage {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.jiage span:nth-of-type(2) {
  color: #ccc;
  font-size: 12px;
}

.yc {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 20px;
}
</style>